{% extends "profile/base.html" %}

{% block title %}404 - 页面未找到{% endblock %}

{% block extra_css %}
<style>
    .error-container {
        text-align: center;
        padding: 80px 20px;
    }
    
    .error-code {
        font-size: 120px;
        font-weight: bold;
        color: #4361ee;
        line-height: 1;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }
    
    .error-message {
        font-size: 24px;
        margin-bottom: 30px;
        color: #495057;
    }
    
    .error-description {
        font-size: 16px;
        color: #6c757d;
        margin-bottom: 40px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .error-actions {
        margin-top: 40px;
    }
    
    .error-icon {
        font-size: 64px;
        color: #4361ee;
        margin-bottom: 20px;
    }
    
    .error-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 40px;
        max-width: 800px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    
    .error-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg, #4361ee, #3f37c9);
    }
    
    .error-illustration {
        margin-bottom: 30px;
    }
    
    .btn-home {
        background: linear-gradient(45deg, #4361ee, #3f37c9);
        border: none;
        padding: 12px 30px;
        font-weight: 500;
        border-radius: 50px;
        transition: all 0.3s;
    }
    
    .btn-home:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(67, 97, 238, 0.3);
    }
    
    .btn-back {
        background-color: #f8f9fa;
        color: #495057;
        border: 1px solid #dee2e6;
        padding: 12px 30px;
        font-weight: 500;
        border-radius: 50px;
        transition: all 0.3s;
    }
    
    .btn-back:hover {
        background-color: #e9ecef;
        transform: translateY(-2px);
    }
    
    .search-form {
        max-width: 500px;
        margin: 0 auto 30px;
    }
    
    .search-input {
        border-radius: 50px;
        padding-right: 120px;
        border: 1px solid #dee2e6;
    }
    
    .search-btn {
        border-radius: 0 50px 50px 0;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        background: linear-gradient(45deg, #4361ee, #3f37c9);
        border: none;
    }
    
    @media (max-width: 768px) {
        .error-code {
            font-size: 80px;
        }
        
        .error-message {
            font-size: 20px;
        }
        
        .error-card {
            padding: 30px 20px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="error-container">
    <div class="error-card">
        <div class="error-illustration">
            <i class="fas fa-search error-icon"></i>
        </div>
        
        <div class="error-code">404</div>
        <h1 class="error-message">页面未找到</h1>
        <p class="error-description">
            抱歉，您访问的页面不存在或已被移动。可能是输入了错误的网址，或者页面已被删除。
        </p>
        
        <form class="search-form position-relative" action="{{ url_for('profile.dashboard') }}" method="get">
            <input type="text" class="form-control search-input" name="search" placeholder="搜索您需要的内容...">
            <button class="btn btn-primary search-btn" type="submit">
                <i class="fas fa-search"></i>
            </button>
        </form>
        
        <div class="error-actions">
            <a href="{{ url_for('profile.dashboard') }}" class="btn btn-primary btn-home me-2">
                <i class="fas fa-home me-2"></i>返回首页
            </a>
            <button onclick="history.back()" class="btn btn-light btn-back">
                <i class="fas fa-arrow-left me-2"></i>返回上页
            </button>
        </div>
        
        <div class="mt-5">
            <h5>您可能需要：</h5>
            <div class="row mt-3">
                <div class="col-md-4 mb-3">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-user-circle fa-3x text-primary mb-3"></i>
                            <h6 class="card-title">用户资料</h6>
                            <a href="{{ url_for('profile.dashboard') }}" class="btn btn-sm btn-outline-primary">查看</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-upload fa-3x text-success mb-3"></i>
                            <h6 class="card-title">文件上传</h6>
                            <a href="{{ url_for('profile.upload_file') }}" class="btn btn-sm btn-outline-success">上传</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-folder-open fa-3x text-info mb-3"></i>
                            <h6 class="card-title">文件列表</h6>
                            <a href="{{ url_for('profile.file_list') }}" class="btn btn-sm btn-outline-info">浏览</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}